<template>
  <view>
    <view class="topView" @touchmove.stop.prevent catchtouchmove="true">
      <view class="container" v-if="countStatus==1 || countStatus==0">
        <view class="close" @click="closeDialog">×</view>
        <view class="text" style="padding-left: 20rpx;">
          <view style="padding-top: 20rpx;">很遗憾，参与次数不足</view>
          <view>去做任务获取额外参与次数</view>
        </view>
        <view class="checkBtnBox">
          <view class="btn submit" @click="skipTaskCenter">获取参与次数</view>
        </view>
      </view>
      <view class="container" v-if="countStatus==3">
        <view class="close" @click="closeDialog">×</view>
        <view class="text">您已完成当前全部任务，无法获得额外参与次数，请留意后续的不凡甄选活动</view>
        <view class="checkBtnBox">
          <view class="btn submit" @click="closeDialog">确认</view>
        </view>
      </view>
    </view>
		<!-- 弱提示 弹窗 -->
		<toast-popup ref="toastPopup" @onToastPopupClick="onToastPopupClick"></toast-popup>
  </view>
</template>

<script>
  export default {
    data() {
      return {}
    },
    props: {
      drawRemainingTimes: {
        typeof: String
      },
      countStatus: {
        typeof: Number
      }
    },

    methods: {
			/**
			 * 展示弱提示
			 * @param {Object} msg 文案
			 */
			handleShowTextToast(msg){
				try{
					this.$refs.toastPopup.showToast(msg);
				}catch(e){}
			},
			/**
			 * 若提示按钮点击回调
			 * @param {Object} data.type 类型：confirm确定，cancel取消
			 * @param {Object} data.callBackData 呼气弹窗时传入的数据
			 */
			onToastPopupClick(data){},
      showRuleDialog() {
        this.$emit('closeDrawCountDialog')
        this.$emit('showRuleDialog')
      },
      closeDialog() {
        this.$emit('closeDrawCountDialog')
      },
      skipTaskCenter() {
        if (this.countStatus == 0) {
          this.$emit('closeDrawCountDialog')
          this.handleShowTextToast('本次不凡甄选任务已结束，期待您下次参与')
          return
        } else {
          this.$emit('closeDrawCountDialog')
          uni.navigateTo({
            url: '/pages/taskCenter/taskCenter'
          })

        }
      }
    }
  }
</script>

<style lang="scss">
  .topView {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999999;
    background-color: rgba(0, 0, 0, 0.64);

    .container {
      box-shadow: 0px 0px 6px 2px #333;
      position: absolute;
      top: 40%;
      width: 520rpx;
      height: 340rpx;
      background: #fff;
      margin: auto;
      left: 0;
      right: 0;

      .close {
        position: absolute;
        width: 40rpx;
        height: 40rpx;
        top: 10rpx;
        right: 10rpx;
        line-height: 40rpx;
        font-size: 44rpx;
        text-align: center;
      }

      .text {
        font-size: 28rpx;
        line-height: 45rpx;
        margin-top: 80rpx;
        margin: 46rpx 50rpx 56rpx;
        text-align: justify;
      }

      .checkBtnBox {
        margin: 0 48rpx;
        display: flex;
        justify-content: center;

        .btn {
          width: 196rpx;
          height: 68rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          border: 1px solid #333;
          background: #fff;
          color: #000;

          &.submit {
            color: #fff;
            background: #000;
          }
        }
      }
    }
  }
</style>
